<template>
	<view class="relative">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar title="优惠券列表" fontColor="#FFFFFF" navbarType='5'></wlk-navbar>
		<view class="wlkflex">
			<u-button type="info" :plain="true" @click="jump('/pages/plugins/commission/form')">自定义优惠券</u-button>
			<u-button type="success" @click="send()">确认发放</u-button>
		</view>
		<u-radio-group :value='couponList[0].id' placement="column" iconPlacement="right" @change="groupChange">
			<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in couponList" :key="index"
				:label="item.name" :name="item.id">
				<view class="coupon-list" v-if="couponList.length>0">
					<view class="coupon">
						<view class="pt_left">
							<view class="pt_left-content">
								<view class="f1" style="color:red">
									<text class="t0">￥</text>
									<text class="t1">{{item.sub_price}}</text>
								</view>
								<view class="f2" style="color:red">
									<text v-if="item.min_price>0">满{{item.min_price}}元可用</text>
									<text v-else>无使用门槛</text>
								</view>
							</view>
						</view>
						<view class="pt_right">
							<view class="f1">
								<view class="t1">{{item.name}}</view>
								<text class="t2" style="background:rgba(255,0,0,0.1);color:red">满减券</text>
								<view class="t3" :style="item.bid>0?'margin-top:0':'margin-top:10rpx'">有效期至
									{{item.end_time}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-radio>
		</u-radio-group>
	</view>
</template>

<script>
	var _self;
	import {
		toUrl
	} from '@/wlkutils/tools';
	export default {
		data() {
			return {
				page: 1,
				cid: '',
				uid: 0,
				couponList: [],
				radiovalue: '',
				loadStatus: 'loading',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
			};
		},
		onShow() {
			this.getList()
		},
		onLoad(options) {
			_self = this;
			this.getList()
			this.uid = options.uid;
		},
		watch: {
			isLogin(val) {
				if (val) {
					_self.getList();
				}
			}
		},
		methods: {
			jump(path) {
				toUrl(path);
			},
			groupChange(n) {
				this.cid = n
			},
			getList() {
				uni.$u.http.post('coupon/getGrantList', {
				}).then(res => {
					if (res.code == 1) {
						this.couponList = res.data
						this.cid = res.data[0].id
					}
				})
			},
			send() {
				uni.showModal({
					title: '提示',
					content: '优惠券发放',
					confirmText: '确认发放',
					success: (res) => {
						if (res.confirm) {
							uni.$u.http.post('coupon/send', {
								cid: this.cid,
								uid: this.uid
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 2000)
								}
							})
						}
					}
				});
			},
			init() {
				this.loadStatus = 'loading';
				this.page = 1;
				this.teams = [];
				this.getList();
			}
		}
	}
</script>

<style scoped lang="scss">
	.coupon-list {
		width: 95%;
		padding: 0 20rpx
	}

	.coupon {
		width: 100%;
		display: flex;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		overflow: hidden;
		align-items: center;
		position: relative;
		background: #fff;
	}

	.coupon .pt_left {
		background: #fff;
		min-height: 200rpx;
		color: #FFF;
		width: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.coupon .pt_left-content {
		width: 100%;
		height: 100%;
		padding-right: 20rpx;
		border-right: 1px solid #EEEEEE;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.coupon .pt_left .f1 {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
	}

	.coupon .pt_left .t0 {
		padding-right: 0;
	}

	.coupon .pt_left .t1 {
		font-size: 60rpx;
	}

	.coupon .pt_left .t2 {
		padding-left: 10rpx;
	}

	.coupon .pt_left .f2 {
		font-size: 20rpx;
		color: #4E535B;
		text-align: center;
	}

	.coupon .pt_right {
		background: #fff;
		width: 50%;
		display: flex;
		min-height: 200rpx;
		text-align: left;
		padding: 20rpx;
		position: relative
	}

	.coupon .pt_right .f1 {
		flex-grow: 1;
		flex-shrink: 1;
	}

	.coupon .pt_right .f1 .t1 {
		font-size: 28rpx;
		color: #2B2B2B;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden
	}

	.coupon .pt_right .f1 .t2 {
		height: 36rpx;
		line-height: 36rpx;
		font-size: 20rpx;
		font-weight: bold;
		padding: 0 16rpx;
		border-radius: 4rpx;
		margin-right: 16rpx;
	}

	.coupon .pt_right .f1 .t2:last-child {
		margin-right: 0;
	}

	.coupon .pt_right .f1 .t3 {
		font-size: 20rpx;
		color: #999999;
		height: 46rpx;
		line-height: 46rpx;
	}

	.coupon .pt_right .f1 .t4 {
		font-size: 20rpx;
		color: #999999;
		height: 46rpx;
		line-height: 46rpx;
		max-width: 76%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>